<template>
  <h1>LhzL</h1>
  <button type="button" @click="changeSlogan">changeSlogan</button>
  <button type="button" @click="changeMsg">changeMsg</button>
  <div v-text="slogan"></div>
  <div v-text="obj.slogan"></div>
  <LhzM ref="lhzM"></LhzM>
</template>

<script>
import LhzM from "@/components/chap05/LhzM";

export default {
  name: "LhzL",
  data() {
    return {
      slogan: '桃李不言下自成蹊',
      obj: {
        slogan: '桃李不言下自成蹊',
      }
    }
  },
  components: {
    LhzM
  },
  // provide: {
  //   slogan: '桃李不言下自成蹊',
  // }
  provide() {
    // 使用函数的形式，可以访问到 `this`
    return {
      slogan: this.slogan,
      obj: this.obj,
      msg: () => {
        return this.slogan;
      }
    }
  },
  methods: {
    changeSlogan() {
      this.slogan = '我爱你中国，亲爱的母亲'
    },
    changeMsg() {
      this.obj.slogan = '我爱你中国，亲爱的母亲'
    }
  }
}
</script>

<style scoped>

</style>